<template>
  <div id="app">
    <HeadeTop v-if="isShowHeader" />
    <router-view />
    <Footer v-if="isHideFooter" />
  </div>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>
<script lang="ts" setup>
import HeadeTop from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
const isShowHeader = ref<boolean>(true);
const isHideFooter = ref<boolean>(true);
const router = useRouter();
// 是否显示头部组件
router.beforeEach((to) => {
  // console.log(to.meta.isHideHeader);
  isHideFooter.value = !to.meta.isHideFooter;
  isShowHeader.value = !to.meta.isHideHeader;
});
</script>
